<template>
	<view class="container">
		<!-- 显示订单信息 -->
		<view class="order-info">
			<view class="order-item">
				<label>订单编号:</label>
				<text>{{ orderNumber }}</text>
			</view>
			<view class="order-item">
				<label>商品总价:</label>
				<text>{{ totalPrice }} 元</text>
			</view>
		</view>
		<!-- 支付按钮 -->
		<button class="pay-button" @click="simulatePay">模拟微信支付</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNumber: '1234567890', // 模拟订单编号
				totalPrice: 0, // 模拟商品总价
				cartList: [], // 购物车商品列表
			};
		},
		onLoad(options) {
			// 可以从 options 中获取订单信息，比如订单编号和商品总价
			// 这里只是示例，实际中需要根据业务逻辑获取订单信息
			this.cartList = JSON.parse(options.list);
			this.totalPrice = options.totalPrice;
			console.log("options",this.cartList )
		},
		onShow() {
			// 可以在页面显示时进行一些初始化操作
		},
		onHide() {
			// 可以在页面隐藏时进行一些清理操作
		},
		onUnload() {
			// 可以在页面卸载时进行一些清理操作
		},
		onPullDownRefresh() {
			// 可以在页面下拉刷新时进行一些操作
			uni.stopPullDownRefresh();
		},
		methods: {
			simulatePay() {
				// 这里模拟微信支付逻辑，实际中需要调用微信支付的 API
				uni.showLoading({
					title: '正在支付...',
				});
				//清空购物车, 清空操作应放在支付成功的回调中，而不是在支付之前，这里只是一个示例。
				this.$myRequest({
					url:"/api/cart/clear",
					method:"GET",
				}).then(res=>{
					console.log("清空购物车成功",res)
					uni.removeStorageSync('cartInfo')
					//生成订单 该功能应该放在清空购物车成功的回调中
					const orderRes=this.$myRequest({
						url:'/api/order/buy',
						method:"POST",
						data:{
							contactId:1,
							products:this.cartList,
							totalPrice:this.totalPrice
						}
					})
					console.log("orderRes",orderRes)
				})
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '支付成功',
						icon: 'success',
					});
					// 支付成功后可以进行页面跳转等操作，比如跳转到订单详情页
					uni.switchTab({
						url: '/pages/index/index', // 假设订单详情页路径
					});
				}, 2000);
			},
		},
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f4f4f4;
	}

	.order-info {
		background-color: #fff;
		padding: 15px;
		border-radius: 5px;
		margin-bottom: 20px;
	}

	.order-item {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pay-button {
		background-color: #1aad19;
		color: #fff;
		padding: 12px;
		border-radius: 5px;
		text-align: center;
	}
</style>